<template>
  <div id="order-echarts" style="width: 80%;height: 100%;">

  </div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import axios from 'axios';
import { getSessionStorage } from '../common';

export default {

    setup(){

        function initEcharts(orderdata){
            let chartDom = document.getElementById('order-echarts');
            let myChart = echarts.init(chartDom);
            let option;

            option = {
            title: {
                text: '订单统计',
                subtext: '统计维度:订单分类',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                name: '订单分类',
                type: 'pie',
                radius: '50%',
                data: orderdata,
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
            };

            option && myChart.setOption(option);
        }

        function initOrderBing(){
            axios.post('/api/countOrder',{
                    headers: {
                        'token': getSessionStorage("token")
                    }
                    })
                    .then(function (response) {
                        console.log(response.data.data);
                        initEcharts(response.data.data)
                    })
                    .catch(function (error) {
                    console.log(error);
                    })
        }


        onMounted(() => {
            initOrderBing();
        });

        return{
            initEcharts
        }
    }


}
</script>

<style>

</style>